<template>
  <div class="body">
    <Form ref="form" :top="0.2" showErrorTip>
      <FormItem label="IP白名单">
        <div v-for="item,key in white_list" :key="key" style="margin-top:10px;">
          <input type="text" v-model="white_list[key]" style="width:80%;" />
          <a style="color: red;line-height: 30px;margin-left: 10px;" @click="del(key)">删除</a>
        </div>
        <Button :block="true" text-color="blue" style="margin-top: 20px;width:80%;" @click="add">新增</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array, Object]
  },
  data() {
    return {
      white_list: [],
      new_value:{}
    }
  },
  async mounted() {
    await this.get()
  },
  methods: {
    /**
     * 修改绑定
     * @param  {[type]} item [description]
     * @return {[type]}      [description]
     */
    affirm(e) {
      let { handleCancel } = e;

      let update = { config: this.new_value.config }
      update.config.system.white_list = this.white_list

      this.$cloud.apply().edit(this.new_value.AppID, update).then(res => {
        if (res) {
          this.$Message({type:'success',text:"保存成功"});
          handleCancel();

        } else {
          this.$Message({type:'error',text:"保存失败"});
        }
      }).catch(error => {
        console.log('错误', error);
      });
    },
    get() {
      this.$cloud.apply().get(this.value.AppID).then(res => {
        this.new_value = res
        this.white_list = res.config.system.white_list || []
      }).catch(error => {
        console.log('错误', error);
      });
    },
    add() {
      this.white_list.push('')
    },
    del(index) {
      this.white_list.splice(index, 1)
    }
  }
};

</script>
<style type="text/css">
.body {
  width: 400px;
  margin: 0 auto;
}

</style>
